<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="../vue.js"></script>
  <style>
    .div01{
        width: 200px;
        height: 100px;
        border: 1px solid yellow;
        margin-bottom: 10px;
    }
    .div02{
        font-size: 0;
        width: 800px;
        height: 500px;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>{{msg}}</h1>
<!--  bind绑定的对象式写法-->
  <div class="div01" :style="{background:bgc}">box1</div>
<!--  对象绑定的数组式写法-->
  <div class="div01" :style="box3Style">box3</div>
  <div class="div02" @click="changePic"><img :src="src" style="width: 100%;height: 100%" alt="正在加载中"></div>
</div>

<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el:'#app',
    data(){
      return{
        msg:'hello Vue~~~',
        bgc:'red',
        src:'../img/桌面4.jpg',
        box3Style:[
          {backgroundColor:'red'},
          {fontSize:'50px'}
        ],
        flag:true
      }
    },
    methods:{
      //添加点击事件，可以让图片动态切换
      changePic:function (){
        if (this.flag){
          this.src='../img/桌面5.jpg'
        }else {
          this.src='../img/桌面4.jpg'
        }
        vm.flag = !vm.flag
      }
    }

  })
</script>

</body>
</html>